<template>
  <div>
    <header class="header">
      <h3>这是about页面</h3>
    </header>
    <div class="wrapper">
      <div class="container-fluid">
        <div class="row fill-h">
          <div class="col-lg-12 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-1">
              <div class="xpanel tablebox">
                <!-- 地图散点 -->
                <div>
                  <el-button type="text" @click="dialogVisible = true"
                    >点击打开 Dialog</el-button
                  >
                  <div @click="gohome">返回首页</div>
                  <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"
                  >
                    <span>这是一段信息</span>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false"
                        >取 消</el-button
                      >
                      <el-button type="primary" @click="dialogVisible = false"
                        >确 定</el-button
                      >
                    </span>
                  </el-dialog>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  created() {
    console.log(123);
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 跳转对应的地址
    gohome() {
      window.location.href = "http://www.baidu.com";
    },
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  min-height: 635px;
  font-family: "microsoft yahei", arial, sans-serif;
  background-color: #0f1c30;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  margin: 0 auto;
  width: 100%;
  height: 65px;
  max-width: 1920px;
  background: url("../assets/echartsimg/header.png") center no-repeat;
  h3 {
    margin: 0;
    padding: 0;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #5dc2fe;
  }
}

.wrapper {
  position: absolute;
  top: 130px;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 555px;
  .container-fluid {
    height: 100%;
    min-height: 100%;
    .row > div {
      padding-left: 7px;
      padding-right: 8px;
    }
    .row {
      .xpanel-wrapper {
        padding-bottom: 40px;
        box-sizing: border-box;
      }
      .xpanel-wrapper-1 {
        height: 100%;
      }
      .xpanel-wrapper-2 {
        height: 100%;
      }
      .xpanel-wrapper-3 {
        height: 100%;
      }
    }
  }
}

.xpanel {
  padding: 15px;
  // padding-top: 10%;
  height: 100%;
  min-height: 170px;
  background: url("../assets/echartsimg/panel.png") center no-repeat;
  background-size: 100% 100%;
  // box-sizing: border-box;
}

/* tool */
.fill-h {
  height: 100%;
  min-height: 100%;
}
</style>
